<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html xmlns:th="" lang="zh-CN">
<%@include file="/WEB-INF/pages/base/include.jsp"%>
<body>
<div id="wrapper">
    <%@include file="/WEB-INF/pages/base/menu.jsp"%>
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h3 class="page-header">轮播图管理</h3>
            </div>
        </div>
        <div class="row">
            <form class="form-horizontal" data-parsley-validate>
                <div class="col-lg-12 col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">轮播图基本信息</div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-lg-12 col-md-12">
                                    <div class="form-group">
                                        <label class="col-lg-2 clo-md-2 control-label">轮播图id：</label>
                                        <div class="col-lg-8">
                                            <input type="text" id="bannerId" class="form-control" placeholder="请输入轮播图名称"
                                                   readonly="readonly">
                                        </div>
                                        <div class="col-lg-2 clo-md-2">
                                            <span class="help-block">*必须填写</span>
                                        </div>
                                    </div>
                                   <div class="form-group">
                                        <label class="col-lg-2 clo-md-2 control-label">商城：</label>
                                        <div class="col-lg-8">
	                                        <select class="form-control" id="mallList">
	                                        </select>
                                    	</div>
                                    	<div class="col-lg-2 clo-md-2">
                                            <span class="help-block">*必须选择</span>
                                        </div>
                                    </div>
                                    
                                    <div class="form-group">
                                        <label class="col-lg-2 clo-md-2 control-label">类型：</label>
                                        <div class="col-lg-8">
	                                        <select class="form-control" id="typeList">
					                             <option value="1">单品</option>
					                             <option value="2">广告区</option>
                                            </select>
                                    	</div>
                                    	<div class="col-lg-2 clo-md-2">
                                            <span class="help-block">*必须选择</span>
                                        </div>
                                    </div>
                                    <div class="form-group" id="productDiv">
                                        <label class="col-lg-2 clo-md-2 control-label">商品id：</label>
                                        <div class="col-lg-8">
                                            <input type="text" id="productId" class="form-control"
                                                   placeholder="请输入商品id">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                         <label class="col-lg-2 clo-md-2 control-label">图片（尺寸：750x450）：</label>
                                         <div class="col-lg-8">
                                             <p><img id="image" src="" width="500px"></p>
                                             <button class="btn btn-default" id="photoUpload_1">上传图片</button>
                                         </div>
                                     </div>
                                    <div class="form-group">
                                         <label class="col-lg-2 clo-md-2 control-label">首页展示图片（尺寸：750x450）：</label>
                                         <div class="col-lg-8">
                                             <p><img id="indexImage" src="" width="500px"></p>
                                             <button class="btn btn-default" id="photoUpload_2">上传图片</button>
                                         </div>
                                     </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 clo-md-2 control-label">开始时间：</label>
                                        <div class="col-lg-8">
                                            <input type="text" id="startTime" class="form-control"
                                                   placeholder="请选择开始时间">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 clo-md-2 control-label">结束时间：</label>
                                        <div class="col-lg-8">
                                            <input type="text" id="endTime" class="form-control"
                                                   placeholder="请选择结束时间">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 clo-md-2 control-label">是否展示：</label>
                                        <div class="col-lg-8">
                                            <input type="text" id="isDisplay" class="form-control"
                                                   placeholder="请输入是否展示（0.不展示；1.展示）">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 clo-md-2 control-label">排列顺序：</label>
                                        <div class="col-lg-8">
                                            <input type="text" id="orderNumber" class="form-control"
                                                   placeholder="请输入轮播图排列顺序">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
                <button type="button" class="btn btn-primary" onclick="mallBanner_modify()"
                        style="margin-left:15px;margin-bottom:30px;">修改
                </button>
                <button class="btn btn-default" id="cancel" style="margin-left:15px;margin-bottom:30px;">
                    取消
                </button>
            </form>
        </div>
    </div>
</div>
<script>
	var images = [],descs=[];
	var currentI = 0;
	$(function(){
		var bannerId = "${bannerId}";
		var baseURL = "${webPath}/mallBanner/detail";
	  	var json_package = {
	       "head": {},
	       "body": {
	       	"bannerId": bannerId
	       }
	   	}
		$.post(baseURL, {"json_package": JSON.stringify(json_package)}, function (result) {
	      if (typeof result == 'string') result = JSON.parse(result);
	      if (result.body.result == '1') {
	          alert(result.body.description)
	      } else {
	      	var mallBanner = result.body.banner;
	      	$("#bannerId").val(mallBanner.id);
	      	$("#productId").val(mallBanner.productId);
	      	$("#image").attr('src',mallBanner.image); 
	      	$("#indexImage").attr('src',mallBanner.indexImage); 
	      	$("#startTime").val(mallBanner.startTime);
	      	$("#endTime").val(mallBanner.endTime);
	      	$("#isDisplay").val(mallBanner.isDisplay);
	      	$("#orderNumber").val(mallBanner.orderNumber);
	      	$("#indexDesc").val(mallBanner.indexDesc);
          	
	      	$("#typeList").val(mallBanner.type);
	      	
	      	$("#mallList").empty();
          	if(mallBanner.mallList != undefined && mallBanner.mallList.length>0){
	      		var mallListString = '';
	      		for(var i=0;i<mallBanner.mallList.length;i++){
	      			if(mallBanner.mallList[i].hava == 1){
	      				mallListString += '<option value="'+mallBanner.mallList[i].mallUuid+'" selected>'+mallBanner.mallList[i].mallName+'</option>';
	      			}else{
	      				mallListString += '<option value="'+mallBanner.mallList[i].mallUuid+'">'+mallBanner.mallList[i].mallName+'</option>';
	      			}
	      		}
	      		$("#mallList").append(mallListString);
	      	}
	      }
	  	})
	});
	
	(function(){
		var ajaxUpload = new AjaxUpload($('#photoUpload_1'), {
		    action: '${webPath}/file/uploadImage',
		    data: {
		        "json_package": JSON.stringify({
		            "head": {},
		            "body": {"file": "file"}
		        })
		    },
		    name: 'file',
		    onSubmit: function (file, ext) {
		        window.uploading = true;
		        $('#photoUpload_1').text('上传中...');
		        $('#photoUpload_1').attr('disabled', true);
		        this.disable();
		
		    },
		    onChange: function (file, extension) {
		        this.disable();
		    },
		    onComplete: function (file, response) {
		    	var data = JSON.parse(response);
		    	fileUrl = data.body.fileUrl;
		    	$("#image").attr('src',fileUrl); 
		        window.uploading = false;
		        $('#photoUpload_1').text('上传图片');
		        this.enable();
		    }
		});
	})();
	
	(function(){
		var ajaxUpload = new AjaxUpload($('#photoUpload_2'), {
		    action: '${webPath}/file/uploadImage',
		    data: {
		        "json_package": JSON.stringify({
		            "head": {},
		            "body": {"file": "file"}
		        })
		    },
		    name: 'file',
		    onSubmit: function (file, ext) {
		        window.uploading = true;
		        $('#photoUpload_2').text('上传中...');
		        $('#photoUpload_2').attr('disabled', true);
		        this.disable();
		
		    },
		    onChange: function (file, extension) {
		        this.disable();
		    },
		    onComplete: function (file, response) {
		    	var data = JSON.parse(response);
		    	fileUrl = data.body.fileUrl;
		    	$("#indexImage").attr('src',fileUrl); 
		        window.uploading = false;
		        $('#photoUpload_2').text('上传图片');
		        this.enable();
		    }
		});
	})();
	
	
	$('#typeList').change(function(e) {
		var type = $("#typeList").find("option:selected").val();
		
		if(type == 1){
        	$("#sellerDiv").hide();
        	$("#desctextDiv").hide();
        	$("#productDiv").show();
        }else if(type == 2){
        	$("#sellerDiv").show();
        	$("#desctextDiv").show();
        	$("#productDiv").hide();
        }
	})
	
	function mallBanner_modify() {
    	var baseURL = "${webPath}/mallBanner/modify";
    	var bannerId = "${bannerId}";
        var productId = $('#productId').val();
        var mallUuid = $("#mallList").find("option:selected").val();
        var type = $("#typeList").find("option:selected").val();
        var image = $("#image")[0].src; 
        var indexImage = $("#indexImage")[0].src; 
        var isDisplay = $('#isDisplay').val();
        var orderNumber = $('#orderNumber').val();
        var startTime = $('#startTime').val();
        var endTime = $('#endTime').val();
        var indexDesc = $('#indexDesc').val();
        
        var productSellerId = null;
        var desctext = null;
        if(type == 2 || type == 3){
        	productSellerId = $("#productSeller").find("option:selected").val();
        	desctext = $("#desctext").val();
        }
        
        var json_package = {
       		"head": {},
            "body": {
            	"bannerId": bannerId,
                "productId": productId,
                "mallUuid": mallUuid,
                "type": type,
                "image": image,
                "indexImage": indexImage,
                "startTime": startTime,
                "endTime": endTime,
                "isDisplay": isDisplay,
                "orderNumber": orderNumber,
                "productSellerId": productSellerId,
                "desctext": desctext,
                "indexDesc": indexDesc
            }
        };
        $.post(baseURL, {"json_package": JSON.stringify(json_package)}, function (result) {
            if (typeof result == 'string') result = JSON.parse(result);
            if (result.body.result == '0') {
                alert('修改成功！')
                window.location.reload(true);
            } else {
                alert('修改失败！')
            }
        })
    }
	$(function () {
        $('#cancel').click(function () {
            window.location.href = "${webPath}toMallBanner";
        })
    });
    $(document).ready(function (e) {
        $('#pro_info').keydown(function () {
            var len = $(this).val().length;
            if (len >= 100) {
                var num = $(this).val().substring(0, 99);
                $(this).val(num);
                alert("超过字数限制")
            }
        })
    });
    $(document).ready(function (e) {
        $('#pro_desc').keydown(function () {
            var len = $(this).val().length;
            if (len >= 140) {
                var num = $(this).val().substring(0, 139);
                $(this).val(num);
                alert("超过字数限制")
            }
        })
    });
    
    $(function () {
        $('#startTime').datetimepicker({
            format: 'YYYY-MM-DD HH:mm:ss'
        });
        $('#endTime').datetimepicker({
            format: 'YYYY-MM-DD HH:mm:ss'
        });
        $('#startTime').datetimepicker();
        $('#endTime').datetimepicker({
            useCurrent: false //Important! See issue #1075
        });
        $("#startTime").on("dp.change", function (e) {
            $('#endTime').data("DateTimePicker").minDate(e.date);
        });
        $("#endTime").on("dp.change", function (e) {
            $('#startTime').data("DateTimePicker").maxDate(e.date);
        });
    });
</script>
</body>
</html>